<template>
  <el-dialog
    :title="textMap[dialogStatus]"
    width="600px"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="form"
      label-position="right"
      label-width="120px"
      v-loading="confirmLoading"
    >
      <el-form-item label="题库名称" prop="libName">
        <el-input
          placeholder="请设置题库名称"
          v-model="form.libName"
        ></el-input>
      </el-form-item>
      <el-form-item label="上传题库" prop="fileList">
        <el-upload
          v-model="form.fileList"
          drag
          ref="upload"
          action="-"
          multiple
          :before-upload="beforeUpload"
          :file-list="fileList"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            此处只能上传excel文件
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">
        取消
      </el-button>
      <el-button type="primary" @click="submitForm">
        确认
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import formMixin from "@/mixins/form";
import request from "@/utils/request";
export default {
  name: "Dialog",
  mixins: [formMixin],
  components: {},
  data() {
    return {
      textMap: {
        update: "修改题库",
        create: "新增题库"
      },
      tipMap: {
        update: "修改成功",
        create: "新增成功"
      },
      rules: {
        libName: [
          {
            required: true,
            message: "请设置题库名称",
            trigger: "blur"
          }
        ],
        fileList: [
          {
            required: true,
            message: "请上传题库",
            trigger: "change"
          }
        ]
      },
      Urls: {
        addUrl: "/api/question/lib/batch/import/",
        editUrl: "/api/exam/update/",
        getByIdUrl: "/api/exam/detail/get/"
      }
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 获取题库
    getQusLibList() {
      request({
        url: this.Urls.qusLibListUrl,
        method: "get"
      })
        .then(res => {
          console.log("form list", res);
          if (res.code == 0) {
            this.qusLibList = res.data.records || [];
          } else {
            that.$notify({
              title: "提示",
              message: res.msg,
              type: "error",
              duration: 2000
            });
          }
        })
        .catch(err => {
          that.dialogFormVisible = false;
        });
    },
    resetForm() {
      this.form = {
        fileList: []
      };
      this.fileList = [];
    },
    // 上传之前 格式控制
    beforeUpload(file) {
      const isXLSX =
        file.type ===
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      const isXLS = file.type === "application/vnd.ms-excel";
      if (!isXLSX && !isXLS) {
        this.$message.error("只能是.xls或者.xlsx格式的excel文件!");
        return false;
      }
      this.form.fileList.push(file);
      this.fileList.push(file);
      return false;
    },
    // 上传
    submitForm() {
      let that = this;
      let url = {
        update: that.Urls.editUrl + that.form.id,
        create: that.Urls.addUrl + that.form.libName
      };
      console.log("form", that.form);
      that.$refs["dataForm"].validate(valid => {
        if (valid) {
          let formData = new FormData();
          that.form.fileList.forEach(function(file) {
            formData.append("files", file, file.name);
          });
          this.confirmLoading = true;
          request({
            url: url[that.dialogStatus],
            method: "post",
            data: formData,
            timeout: 0
          })
            .then(res => {
              this.confirmLoading = false;
              console.log("res form", res);
              if (res.code == 0) {
                that.$notify({
                  title: "提示",
                  message: that.tipMap[that.dialogStatus],
                  type: "success",
                  duration: 2000
                });
                that.dialogFormVisible = false;
                that.$parent.afterSubmit();
              } else {
                that.$notify({
                  title: "提示",
                  message: res.msg,
                  type: "error",
                  duration: 2000
                });
              }
            })
            .catch(err => {
              this.confirmLoading = false;
            });
        }
      });
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}
};
</script>
<style lang="scss" scoped></style>
